<template>
  <div class="login-container">
    <div class="dataBox">
      <h3>后台管理系统</h3>
      <p v-show="show">
        <i class="el-icon el-icon-warning"></i>用户名或密码错误
      </p>
      <el-input placeholder="请输入账号" clearable v-model="uname" class="mb30">
        <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
      </el-input>
      <el-input
        placeholder="请输入密码"
        clearable
        v-model="pwd"
        show-password
        class="mb30"
      >
        <i slot="prefix" class="el-input__icon el-icon-lock"></i>
      </el-input>
      <el-button style="width: 100%" @click="cliLogin">登录</el-button>
      <div class="verifybox">
        <slide-verify
          :l="42"
          :r="10"
          :w="360"
          :h="155"
          ref="resetthis"
          slider-text="向右滑动"
          @success="onSuccess"
          v-show="showverify"
        ></slide-verify>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "../apis/users";
export default {
  name: "App",
  data() {
    return {
      uname: "",
      pwd: "",
      show: false,
      msg: "",
      showverify: false,
    };
  },
  methods: {
    cliLogin() {
      this.showverify = true;
    },
    onSuccess() {
      this.msg = "login success";
      this.showverify = false;
      this.$refs.resetthis.reset();
      login({ account: this.uname, password: this.pwd }).then((res) => {
        console.log(res.data);
        if (res.data.code == 0) {
          localStorage.userID = res.data.id;
          localStorage.uname = this.uname;
          localStorage.token = res.data.token;
          localStorage.role = res.data.role;
          this.$router.push("/index/main");
          this.$message({
            message: "系统提示:恭喜你，登陆成功!",
            type: "success",
            center: true,
          });
        } else {
          this.show = true;
        }
      });
    },
  },
};
</script>

<style lang="less">
@import url("../assets/styles/thmes.less");
.login-container {
  width: 100%;
  background: url("../assets/imgs/bgc.png") no-repeat;
  background-size: 650px;
  background-position: 100px 50px;
  height: 100%;
  background-color: @basecolor2;
  color: #fff;
  position: relative;
  .dataBox {
    width: 400px;
    height: 300px;
    position: absolute;
    right: 30%;
    top: 50%;
    margin-right: -200px;
    margin-top: -150px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 20px;
    h3 {
      text-align: center;
      margin-bottom: 55px;
    }
    p {
      width: 360px;
      color: #f56c6c;
      position: absolute;
      top: 60px;
      text-align: center;
    }
    .el-input__inner {
      background-color: rgba(255, 255, 255, 0.8);
    }
    button {
      background-color: @basecolor;
      border: 0;
      color: #fff;
    }
    button:hover {
      background-color: @tintcolor;
      color: @basecolor2;
    }
    .verifybox {
      position: absolute;
      top: 20px;
      .slide-verify-slider {
        margin-top: 0;
      }
    }
  }
}
</style>